<template>
  <div class="header">
    <div class="main">
      <div class="box">
        <div class="boxheader">
          <div class="boxText">全场换购</div>
          <div class="boxright">已满0.01元,可选择10件商品换购</div>
          <div class="purchase">去换购</div>
          <img
            class="arrowhead"
            src="https://yanxuan.nosdn.127.net/static-union/16583952462be242.png"
            alt=""
          />
        </div>
        <div class="hydrated">
          <van-swipe :loop="false" :width="220" :show-indicators="false">
            <van-swipe-item style="display: flex" v-for="cart in CartList[0]?.cartInfoList" :key="cart.id">
              <img class="swipeImg" :src="cart.imgUrl" alt="" />
              <div class="swipe">
                <span class="info-namehydrated">{{ cart.skuName }}</span>
                <span class="info-deschydrated">小花园沙拉碗-粉色</span>
                <div class="lefthydrated">
                  <span class="aaahydrated">换购价</span>
                  <div class="pricehydrated">
                    <span class="unithydrated">¥</span>
                    <span class="pricesize">{{ cart.cartPrice }}</span>
                    <span class="oldhydrated">¥19.9</span>
                  </div>
                </div>
              </div>
            </van-swipe-item>

            <van-swipe-item style="width: 50px">
              <div class="chankan">
                <div>查看全部</div>
                <div>
                  <img
                    class="arrowhead"
                    src="https://yanxuan.nosdn.127.net/static-union/16583952462be242.png"
                    alt=""
                  />
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>

      <div class="box2">
        <div class="boxheader">
          <van-checkbox v-model="Checked" checked-color="#ee0a24" class="btn"></van-checkbox>
          <div class="boxText">单价包邮</div>
          <div class="boxright">以下商品已免邮</div>
        </div>

        
          <van-swipe-cell right-width="50" v-for="item in CartList[0]?.cartInfoList" :key="item.id">
            <div class="item">
          <input type='checkbox' class="btn2" :checked="item.isChecked as any " @click="handlechecked(item)">
          <div class="itembox">
            <img class="itemImg" :src="item.imgUrl" alt="" />
            <img
              class="itemdated"
              src="https://yanxuan.nosdn.127.net/static-union/1660720775214e32.png"
              alt=""
            />
            <div class="itemhtmml">不可用礼品卡</div>

            <div class="title">
              <div class="titlebox">
                <div class="tejia">特价</div>
                <div class="xiuxian">{{ item.skuName }}</div>
              </div>
              <div class="container">
                <span class="cated">¥</span>
                <span class="size">{{ item.skuPrice * item.skuNum}}</span>
                <span class="xiuhui" style="color: red;">优惠后</span>
                <span class="oldhy" style="color: red;">¥{{ item.cartPrice }}</span>
              </div>
             
            <div class="btna">
              <span style="font-size: 16px; width: 40px; ">{{ item.skuNum }}</span>
              <van-button size="mini" @click="addnum(item)">+</van-button>
              <van-button size="mini" @click="subtrahend(item)">-</van-button>
            </div>

            </div>
            
          </div>
        </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" >删除</van-button>
          </template>
        </van-swipe-cell>
      </div>


      <van-submit-bar :price="getskuprice*100" button-text="结算" placeholder @click="settleaccounts">
      全选
      <input type='checkbox' class="btn2" @click="getquanxuan" :checked="getchecked">
      <template #tip>
        <img class="tipimg" src="https://yanxuan.nosdn.127.net/98e742f093afd67b52fd085f41179572.png" alt="">
        开通Pro会员，享天天免邮, <span style="float: right;" >立即开通<img
            class="arrowhead"
            src="https://yanxuan.nosdn.127.net/static-union/16583952462be242.png"
            alt=""
          /></span>
      </template>
    </van-submit-bar>
    </div>
   
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ShopCard'
})
</script>
<script lang="ts" setup>
import type { CartData } from '@/api/shopcart';
import router from '@/router';
import {shopCartStore} from '@/stores/shopCart'
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import { ref,onMounted} from 'vue'
let Checked = ref<any>(true)
const cartData = shopCartStore()
const {CartList} = storeToRefs(cartData)

const settleaccounts = (e:any) =>{
    router.push('/address')
    e.preventDefault();
}

const addnum = (item:CartData) => {
  item.skuNum += 1
  item.isChecked = 1
}

const subtrahend = (item:CartData) => {
  if(item.skuNum > 1){
    item.skuNum -= 1
    item.isChecked = 1
  }
}

const getskuprice = computed(() => {
  let skuPrice = 0
  CartList.value[0]?.cartInfoList.forEach(item => {
    if(item.isChecked === 1){
      skuPrice += item.skuPrice * item.skuNum
    }
  })
  return skuPrice
})

onMounted(()=>{
  cartData.setCartList()
})



const getquanxuan = (e:any) => {
  const {checked} = e.target
  const newchecked = checked ? 1 : 0
  CartList.value[0]?.cartInfoList.forEach(item =>{
    item.isChecked = newchecked
  })
}

const getchecked = computed(() => {
  return CartList.value[0]?.cartInfoList.every(item => item.isChecked === 1) 
}) 
  


const handlechecked = (item:CartData) =>{
  const { isChecked } = item
      const newisChecked = isChecked === 1 ? 0 : 1
        item.isChecked = newisChecked     
  }
</script>

<style lang="less" scoped>
.header {
  background-color: #f4f4f4;
  position: relative;
  height: 100%;
}
.main {
  padding-top: 10px;
}
.box {
  background-color: #ffffff;
  height: 146px;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.box2{
  background-color: #ffffff;
  border-radius: 10px;
  margin: 0 auto;
  padding-bottom: 140px;
}
.boxheader {
  width: 100;
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.boxText {
  color: #333333;
  font-weight: 700;
  font-size: 16px;
}
.boxright {
  font-size: 12px;
  color: #333333;
  text-align: right;
  flex: 1;
  margin-right: 10px;
}
.purchase {
  font-size: 11px;
}
.arrowhead {
  width: 6px;
  height: 10px;
  margin-left: 5px;
}
.hydrated {
  width: 90%;
  height: 82px;
  margin-left: 20px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  display: flex;
  background: #fafafa;
  border-radius: 20px;
  margin-right: 10px;
}
.swipeImg {
  width: 70px;
  height: 70px;
  background: #f4f4f4;
  margin-right: 10px;
  margin-top: 7px;
}
.info-namehydrated {
  font-size: 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 146px;
}
.info-deschydrated {
  font-size: 7px;
}
.lefthydrated {
  display: flex;
  height: 20px;
}
.hydrated {
  font-size: 7px;
}
.swipe {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-radius: 10px;
  height: 70px;
  margin-top: 10px;
}
.aaahydrated {
  font-size: 9px;
  color: red;
}
.pricehydrated {
  width: 83px;
  height: 15px;
}
.pricesize {
  font-size: 18px;
  color: red;
  font-weight: 700;
  line-height: 15px;
}
.oldhydrated {
  text-decoration: line-through;
  color: #999999;
}
.chankan {
  width: 100px;
  height: 66px;
  line-height: 66px;
  background-color: #fafafa;
  margin-top: 10px;
  display: flex;
  color: red;
  margin-left: 20px;
}
.btn {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}
.item {
  width: 100%;
  height: 115px;
  display: flex;
  margin-bottom: 30px;
}
.btn2 {
  line-height: 115px;
  height: 115px;
  margin-left: 12px;
  width: 17px;
}
.itembox {
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.itemImg {
  height: 90px;
  width: 90px;
  margin-top: -2px;
}
.itemdated {
  width: 10px;
  height: 10px;
}
.itemhtmml {
  font-size: 12px;
  margin-left: 10px;
  margin-top: -10px;
}
.title {
  width: 205px;
  height: 90px;
  display: flex;
}
.titlebox {
  width: 240px;
  height: 21px;
  font-size: 14px;
  position: absolute;
  margin-top: 10px;
  top: 0;
  right: 0;
  display: flex;
}
.tejia {
  padding-right: 10px;
}
.container{
  font-size: 16px;
  position: absolute;
  top: 69px;
  right: 114px;
}
.size{
  font-weight: bold;
  color: #333333;
  font-size: 18px;
}
::v-deep .van-submit-bar__tip{
  margin-top: -140px;
  position: fixed;
  top: -150;
  background-color: #FFE0BD;
  height: 30px;
  line-height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 94%;
}
::v-deep .van-submit-bar__bar{
  background-color: #ffffff;
  bottom: 0;
  width: 95%;
  position: fixed;
  top: 85%;
}
.tipimg{
  width: 12px;
  height: 12px;
}
.van-submit-bar__text{
  font-size: 10px;
  height: 50px;
}

.submitText{
  font-size: 10px;
}
.goods-card {
    margin: 0;
    background-color: white;
  }

::v-deep .van-swipe-cell__right{
    height: 100%;
    width: 100px;
  }
::v-deep .delete-button{
    width: 50px;
    height: 107px;
    background-color: red;
    font-size: 16px;
    text-align: center;
    display: list-item;
  }
  //删除伪元素
 ::v-deep .delete-button::marker{
  content: none;
 }
 .btna{
  display: flex;
  position: absolute;
  right: 0;
  left: 250px;
  bottom: 20%;
 }
 .xiuxian{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
 }
</style>
